<template>
  <div>
    <tabbar>
      <tabbar-item :selected="selectedPath === 'home'" link="/">
        <img slot="icon" src="../../assets/images/icon-home.png">
        <img slot="icon-active" src="../../assets/images/icon-home-active.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :selected="selectedPath === 'hall'" link="/hall">
        <img slot="icon" src="../../assets/images/icon-type.png">
        <img slot="icon-active" src="../../assets/images/icon-type-active.png">
        <span slot="label">我的</span>
      </tabbar-item>
      <tabbar-item :selected="selectedPath === 'release'" link="/release">
        <img class="plus-icon" slot="icon" src="../../assets/images/icon-tuishou.png">
        <span slot="label">我的</span>
      </tabbar-item>
      <tabbar-item :selected="selectedPath === 'exhibition'" link="/exhibition">
        <img slot="icon" src="../../assets/images/icon-shopcar.png">
        <img slot="icon-active" src="../../assets/images/icon-shopcar-active.png">
        <span slot="label">我的</span>
      </tabbar-item>
      <tabbar-item :selected="selectedPath === 'mine'" link="/mine">
        <img slot="icon" src="../../assets/images/icon-my.png">
        <img slot="icon-active" src="../../assets/images/icon-my-active.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Group, Cell } from "vux";

export default {
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  },
  data() {
    return {
      selectedPath: "home" //选项卡选中状态
    };
  },
  mounted() {
    const name = this.$route.name;
    if (name === "home") {
      this.selectedPath = "home";
    } else if (name === "hall") {
      this.selectedPath = "hall";
    } else if (name === "release") {
      this.selectedPath = "release";
    } else if (name === "exhibition") {
      this.selectedPath = "exhibition";
    } else if (name === "mine") {
      this.selectedPath = "mine";
    }
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.weui-tabbar {
  position: fixed !important;
  left: 0;
  bottom: 0 !important;
  & > * {
    text-decoration: none;
  }
}

.plus-icon {
  position: absolute;
  top: -24px;
  left: -50%;
  width: 200%;
  height: 200%;
}
</style>
